import { useState } from 'react';

import Vprok from '@/shared/icons/logo/logo-vprok.svg';
import { Button } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Shopping.module.scss';

export const Shopping = () => {
  const [tab, setTab] = useState(1);

  return (
    <ColouredInfoBlock className={cs.block}>
      <h2 className="h2">Список покупок</h2>
      <p className={cn('p', cs.descr)}>Смотрите, делитесь в одно касание и покупайте дешевле в онлайн-магазине Впрок</p>
      <div className={cs.tabs}>
        <Button
          className={cn(cs.tab, { [cs.active]: tab === 1 })}
          data-testid="button-set_tab_1"
          onClick={() => setTab(1)}
        >
          1 день
        </Button>
        <Button
          className={cn(cs.tab, { [cs.active]: tab === 2 })}
          data-testid="button-set_tab_2"
          onClick={() => setTab(2)}
        >
          2 дня
        </Button>
        <Button
          className={cn(cs.tab, { [cs.active]: tab === 2 })}
          data-testid="button-set_tab_3"
          onClick={() => setTab(2)}
        >
          3 дня
        </Button>
        <Button
          className={cn(cs.tab, { [cs.active]: tab === 3 })}
          data-testid="button-set_tab_4"
          onClick={() => setTab(3)}
        >
          7 дней
        </Button>
      </div>
      <div className={cs.list}>
        <div className={cs.item}>
          <span>Молочная смесь</span>
          <div className={cs.itemInfo}>
            {tab === 1 && (
              <>
                <span>400 г</span>
                <span>~ 1 упаковка</span>
              </>
            )}
            {tab === 2 && (
              <>
                <span>800 г</span>
                <span>~ 2 упаковки</span>
              </>
            )}
            {tab === 3 && (
              <>
                <span>1600 г</span>
                <span>~ 4 упаковки</span>
              </>
            )}
          </div>
        </div>
        <div className={cs.item}>
          <span>Гречневая каша</span>
          <div className={cs.itemInfo}>
            {tab === 1 && (
              <>
                <span>150 г</span>
                <span>~ 1 упаковка</span>
              </>
            )}
            {tab === 2 && (
              <>
                <span>300 г</span>
                <span>~ 1 упаковка</span>
              </>
            )}
            {tab === 3 && (
              <>
                <span>500 г</span>
                <span>~ 1 упаковка</span>
              </>
            )}
          </div>
        </div>
        <div className={cs.item}>
          <span>Пюре из брокколи</span>
          <div className={cs.itemInfo}>
            {tab === 1 && (
              <>
                <span>150 г</span>
                <span>~ 2 банки</span>
              </>
            )}
            {tab === 2 && (
              <>
                <span>360 г</span>
                <span>~ 3 банки</span>
              </>
            )}
            {tab === 3 && (
              <>
                <span>500 г</span>
                <span>~ 4 банки</span>
              </>
            )}
          </div>
        </div>
        <div className={cs.item}>
          <span>Яйцо</span>
          <div className={cs.itemInfo}>
            {tab === 1 && (
              <>
                <span>10 г</span>
                <span>~ 1 штука</span>
              </>
            )}
            {(tab === 2 || tab === 3) && (
              <>
                <span>20 г</span>
                <span>~ 2 штуки</span>
              </>
            )}
          </div>
        </div>
      </div>
      <div className={cs.button}>
        <Image alt="Vprok" height={24} src={Vprok} width={24} />
        <span>Заказать со скидкой</span>
      </div>
    </ColouredInfoBlock>
  );
};
